<template>
  <view class="page">
    <canvas canvas-id="canvas"></canvas>
    <view class='searcher'>
      <searcher @confirm="searchResult" @input='inputSearch' :value='searchStr' placeholder="请输入关键词"></searcher>
    </view>
    <scroll-view scroll-y class="result-list-box">
      <view class="reslut-text" v-for="(item, idx) of resultList" :key='idx'>{{item}}</view>
    </scroll-view>
    <view class="ctrls">
      <view class="ctrl" @click="goRabbishCategary">
        <mask-label class='mask' label="分类练习"></mask-label>
        <text>戳我！！！</text>
        <text>垃圾知多少？</text>
        <image :src="img.knowledge"></image>
      </view>
      <image class="search-img" :src="checkImgUrl" mode="aspectFit"></image>
      <view class="ctrl" @click="chooseImage">
        <mask-label class='mask' label="垃圾识别"></mask-label>
        <!-- #ifdef MP-ALIPAY -->
        <text style="color: red;">(当前平台暂不支持)</text>
        <!-- #endif -->
        <!-- #ifndef MP-ALIPAY -->
        <text>这是什么垃圾？</text>
        <!-- #endif -->
        <text>点我搜一下。</text>
        <image :src="img.check"></image>
      </view>
    </view>
    <view class="categorys">
      <navigator class="category" url="/pages/description/index?id=1"></navigator>
      <navigator class="category" url="/pages/description/index?id=2"></navigator>
      <navigator class="category" url="/pages/description/index?id=4"></navigator>
      <navigator class="category" url="/pages/description/index?id=8"></navigator>
    </view>
  </view>
</template>

<script>
  import searcher from '@/components/searcher'
  import maskLabel from '@/components/mask_label'
  import img from '@/assets/js/data/img'

  const results = [{
    name: '可回收物',
    category: 1,
  }, {
    name: '有害垃圾',
    category: 2,
  }, {
    name: '厨余垃圾',
    category: 4,
  }, {
    name: '其他垃圾',
    category: 8,
  }]

  export default {
    components: {
      searcher,
      maskLabel,
    },
    data() {
      return {
        searchStr: '',
        title: '',
        checkImgUrl: '',
        img,
        resultList: ['请搜索'],
      }
    },
    onShow() {
      this.$util.checkUpdate()
    },
    onLoad() {
      this.getHot()
    },
    methods: {
      /**
       * 热搜
       */
      async getHot() {
        let resultList = ['(今日热搜)']
        let res = await this.$http.tGet(this.$api.RUBBISH_HOT)
        if (res) {
          res.forEach(item => {
            let type = ''
            let matchResult = results.find(i => i.category === 2 ** item.type)
            if (matchResult) {
              type = matchResult.name
            } else {
              type = '未知类型'
            }
            resultList.push(`${item.name}: ${type}`)
          })
        }
        this.resultList = resultList
      },
      inputSearch(e) {
        this.searchStr = e.detail.value
      },
      goRabbishCategary() {
        uni.navigateTo({
          url: `/pages/question/index`
        })
      },
      async searchResult() {
        if (!this.searchStr.length) {
          this.resultList = ['请搜索']
          return
        }
        this.resultList = ['获取中...']
        let res = await this.$http.tGet(this.$api.RUBBISH_CATEGORY, {
          word: this.searchStr
        })
        if (res) {
          let resultList = []
          if (res) {
            res.forEach(item => {
              let type = ''
              let matchResult = results.find(i => i.category === 2 ** item.type)
              if (matchResult) {
                type = matchResult.name
              } else {
                type = '未知类型'
              }
              resultList.push(`${item.name}: ${type}`)
            })
          }
          this.resultList = resultList
        } else {
          this.resultList = ['没有找到']
        }
      },
      async chooseImage() {
        let canvasId = 'canvas'
        // #ifdef MP-ALIPAY
        return
        // #endif
        uni.chooseImage({
          count: 1,
          success: async imgRes => {
            let filePath = imgRes.tempFilePaths[0]
            this.checkImgUrl = filePath

            let res = await this.$util.img2Base64(filePath, canvasId)
            this.resultList = ['获取中...']
            let checkRes = await this.$http.tPost(this.$api.RUBBISH_UPLOAD_CHECK, {
              img: res.base64,
            })
            if (checkRes) {
              let resultList = []
              checkRes.forEach(item => {
                let type = ''
                let matchResult = results.find(i => {
                  return i.category === 2 ** item.lajitype
                })
                if (matchResult) {
                  type = matchResult.name
                } else {
                  type = '未知类型'
                }
                resultList.push(`${item.name}: ${type}（可信度：${item.trust}）`)
                this.resultList = resultList
              })
            } else {
              this.resultList = ['没有找到']
            }
          }
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .page {
    align-items: center;
  }

  .border() {
    border: 4upx solid #161616;
  }

  canvas {
    position: absolute;
    left: 0;
    top: -10000px;
    width: 2000px;
    height: 2000px;
  }

  .ctrls {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 0 28upx;

    .ctrl {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 270upx;
      height: 306upx;
      border: 4upx solid black;
      border-radius: 6upx;
      background: white;

      text {
        line-height: 48upx;
        margin-left: 32upx;

        &:nth-child(2) {
          margin-top: 60upx;
        }
      }

      image {
        align-self: flex-end;
        width: 174upx;
        height: 162upx;
        margin-right: 20upx;
      }

      .mask {
        position: absolute;
        top: -32upx;
        left: 28upx;
      }
    }
  }

  .result-list-box {
    width: 690upx;
    height: 350upx;
    .border();
    border-radius: 6upx;
    background: white;
    padding: 12upx 24upx;
    margin: 24upx 0 48upx;

    .reslut-text {
      width: 100%;
      line-height: 48upx;
      font-size: 24upx;
      font-family: PingFangSC-Regular;
    }
  }

  .search-img {
    @size: 120upx;
    width: @size;
    height: @size;
    margin: 8upx 0;
  }
  .categorys {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
</style>
